<%--
  Created by IntelliJ IDEA.
  User: 小袁啊  添加盘点页面
  Date: 2024/10/25
  Time: 上午10:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加盘点页面</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <%--门店搜索框--%>
    <el-form :inline="true" :model="branchFrom" class="demo-form-inline">
        <el-form-item>
            <el-select v-model="branchFrom.branchId" placeholder="请选择分店" clearable>
                <el-option
                        v-for="aa in branchlist"
                        :label="aa.branchname"
                        :value="aa.branchid"
                >
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
    </el-form>
        <el-button size="mini" type="primary" @click="addDialog()">新增盘点</el-button>
    <%--显示所有商品信息--%>
    <template>
        <el-table
                border
                :data="branchInFo"
                style="width: 100%"
                border
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <%--商品图片--%>
            <el-table-column
                    fixed="left"
                    prop="url"
                    label="图片"
                    width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.url" width="100" height="100">
                </template>
            </el-table-column>
            <el-table-column
                    prop="goodsid"
                    label="商品编号">
            </el-table-column>
            <el-table-column
                    prop="goodsname"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="keycapname"
                    label="键帽材质">
            </el-table-column>
            <el-table-column
                    prop="shafttype"
                    label="轴体类型">
            </el-table-column>
            <el-table-column
                    prop="shaftchoosename"
                    label="轴体选择">
            </el-table-column>
            <el-table-column
                    prop="interfacetype"
                    label="接口类型">
            </el-table-column>
            <el-table-column
                    prop="backlightcolorname"
                    label="背光颜色">
            </el-table-column>
            <el-table-column
                    prop="cprice"
                    label="商品进价">
            </el-table-column>
            <el-table-column
                    prop="sprice"
                    label="商品售价">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="门店名称">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    prop="counts"
                    label="商品数量"
                    width="100px">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="盘点数量"
                    width="100px">
                <template slot-scope="scope">
                    <el-input
                            v-model="input[scope.row.goodsid+''+scope.row.bid]"
                    <%--失去焦点时触发，验证输入的盘点数量是否超过库存数量，报损数量=总数——盘点数量--%>
                            @blur="pandian(scope.row.counts,scope.row.goodsid+''+scope.row.bid)"
                            clearable>
                    </el-input>
                </template>

            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="报损数量"
                    width="100px"
                    show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-input
                            v-model="shun[scope.row.goodsid+''+scope.row.bid]"
                            @blur="shunshi(scope.row.counts,scope.row.goodsid+''+scope.row.bid)"
                            clearable>
                    </el-input>
                </template>
            </el-table-column>
        </el-table>
        <%--分页 --%>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </template>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            branchInFo: [], //显示所有商品信息
            branchlist: [],//搜索门店数据
            branchFrom: {},//搜索门店提交的表单数据
            list: [],//盘点数据

            //分店名称
            newbranchname:"",
            //是否有未审核的盘点
            state:"",

            //多选框选中的行
            multipleSelection: [],

            //分页
            currentPage: 1,
            pageSize: 5,
            total: 0,

            input: {},//盘点数目
            shun: {},//损失数目

        },
        //自启动
        created() {
            this.loadBranchList();//加载分店列表
            this.loadgoodsList();//加载商品信息
            this.getBranchNew();//加载当前登录者的分店
            this.checkState();//判断是否有未审核的盘点
        },
        //方法
        methods: {
            //添加按钮事件
            addDialog() {
                //判断是否有未审核的盘点
                if (this.state==500){
                    this.$message({
                        message: '请先审核未通过的盘点！',
                        type: 'warning'
                    });
                    return;
                }
                //判断是否有选中多选框，没有则弹出警告
                if (this.multipleSelection[0] == null) {
                    this.$message({
                        message: '请选择要提交盘点的商品！',
                        type: 'warning'
                    });
                    return;
                }
                //判断是否为自己的分店,否则不显示添加框并弹出警告
                for (let i = 0; i < this.multipleSelection.length; i++){
                    if (this.newbranchname!=this.multipleSelection[i].branchname){
                        this.$message({
                            message: '请选择本分店的商品！',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //判断是否输入数据，没有则弹出警告
                for (let i = 0; i < this.multipleSelection.length; i++){
                    if (this.input[this.multipleSelection[i].goodsid+''+this.multipleSelection[i].bid] == '' ||
                        this.input[this.multipleSelection[i].goodsid+''+this.multipleSelection[i].bid] == null){
                        this.$message({
                            message: '请输入盘点数量！',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //确认提交提示
                this.$confirm('是否提交盘点数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //循环遍历多选框，将选中的数据存入list
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        this.list.push({
                            goodsid: this.multipleSelection[i].goodsid,
                            invennum: this.input[this.multipleSelection[i].goodsid+''+this.multipleSelection[i].bid],
                            lossnum: parseInt(this.shun[this.multipleSelection[i].goodsid+''+this.multipleSelection[i].bid]),
                        });
                    }
                    //console.log(this.list);
                    //发送请求
                    axios.post("/inventory/addInventory",this.list).then(res => {
                        //console.log(res);
                        if (res.data.code == 200) {
                            this.$message({
                                message: "操作成功",
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: "操作失败",
                                type: 'error'
                            });
                        }
                        //刷新页面
                        this.loadgoodsList();
                        //加载当前状态
                        this.checkState();
                    })
                    //console.log(list);
                })
            },
            //输入盘点数目，计算报损数目
            pandian(counts, id) {
                if (this.input[id] != ''&& this.input[id] != null){
                    if (parseInt(this.input[id]) < counts && parseInt(this.input[id])>=0){
                        this.$set(this.shun, [id], counts - this.input[id]);
                    }else {
                        this.$set(this.input, [id], '');
                        this.$set(this.shun, [id], '');
                        //提示
                        this.$message({
                            message: '输入数量有误',
                            type: 'warning'
                        });
                    }
                }
                /*//判断输入是否为数字
                if (isNaN(parseInt(this.input[id])) && this.input[id] !== '' && this.input[id] !== null) {
                    this.$message.error("请输入数字")
                    //清空输入框
                    this.$set(this.input, [id], '');
                } else if (!Number.isInteger(parseInt(this.input[id])) && this.input[id] !== '' && this.input[id] !== null) {
                    this.$message.error("请输入整数数字")
                    this.$set(this.input, [id], '');
                } else if (this.input[id] > counts) {
                    this.$message.error("输入数量有误")
                    this.$set(this.input, [id], '');
                } else if (this.input[id] < 0) {
                    this.$message.error("输入数量有误")
                    this.$set(this.input, [id], '');
                } else {
                    this.$set(this.shun, [id], counts - this.input[id]);
                }*/
            },
            //输入报损数目，计算盘点数目
            shunshi(counts, id) {
                //判断不是空的的时候
                if (this.shun[id] != ''&& this.shun[id] != null){
                    //输入的数目不能呢更超过库存的数目
                    if (parseInt(this.shun[id]) < counts && parseInt(this.shun[id])>=0){
                        this.$set(this.input, [id], counts - this.shun[id]);
                    }else {
                        this.$set(this.shun, [id], '');
                        this.$set(this.input, [id], '');
                        //提示
                        this.$message({
                            message: '输入数量有误',
                            type: 'warning'
                        });
                    }
                }
                /*if (!Number.isInteger(parseInt(this.shun[id]))) {
                    this.$set(this.input, [id], '');
                    this.$message.error("请输入数字")
                } else if (this.shun[id] > counts) {
                    this.$set(this.input, [id], '');
                    this.$message.error("输入数量有误")
                } else if (this.shun[id] < 0) {
                    this.$set(this.input, [id], '');
                    this.$message.error("输入数量有误")
                } else {
                    this.$set(this.input, [id], counts - this.shun[id]);
                }*/
            },
            //获取当前门店信息
            getBranchNew() {
                axios.get("/branch/getNewBranch").then(resp => {
                    this.newbranchname = resp.data.data;
                    //console.log(this.newbranchname)
                })
            },
            ////检查是否已有未审核的盘点
            checkState(){
                axios.get("/inventory/checkState").then(resp => {
                    this.state=resp.data.code
                    console.log(this.state)
                })
            },
            //加载商品信息
            loadgoodsList() {
                axios.post("/goods/listgoods?currentPage=" + this.currentPage +
                    "&pageSize=" + this.pageSize, this.branchFrom).then(resp => {
                    //console.log(resp);
                    this.branchInFo = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },
            //加载分店列表
            loadBranchList() {
                axios.get("/branch/getBranchName").then(resp => {
                    this.branchlist = resp.data.data;
                })
            },
            // 每页数据条数改变
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadgoodsList();
            },
            // 页码改变
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadgoodsList();
            },
            // 搜索
            onSubmit() {
                this.loadgoodsList();
            },
            //多选框选中事件
            handleSelectionChange(val) {
                this.multipleSelection = val
                //console.log(this.multipleSelection)
            },
        },
    })
</script>
</html>
